<template>
  <j-modal :visible="visible" :width="600" :title="title" switchFullscreen @cancel="handleClose" @ok="handleUpload">
    <a-upload-dragger
      :multiple="false"
      :accept="accept"
      :fileList="fileListData"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
      <p class="ant-upload-hint">
        支持扩展名：.xls,.xlsx
      </p>
    </a-upload-dragger>
    <div class="ant-upload-matter">
      <p>注意事项：</p>
      <p>1.请勿修改模版格式，以免导入失败；</p>
    </div>
    <template slot="footer">
      <downLoadComponents
        v-if="isLoadServerFile"
        ref="downLoadComponentsId"
        :formData="exportDowmData"
        :apiUrl="downUrl"
        :fileText="fileText + '.xls'"
      >
        <a class="footer-model" @click="exportDowm">下载数据模板</a>
      </downLoadComponents>
      <a v-else class="footer-model" :href="downloadFileAddr" :download="downloadFileName">下载数据模板</a>
      <a-button key="back" @click="handleClose"> 取消 </a-button>
      <a-button key="submit" type="primary" :disabled="isDisabled" :loading="loading" @click="handleUpload">
        开始导入
      </a-button>
    </template>
  </j-modal>
</template>

<script>
import { postAction } from '@/api/manage'
import downLoadComponents from '@/components/zxd/downLoad'
export default {
  components: {
    downLoadComponents
  },
  props: {
    //下载模版文件地址
    title: {
      type: String,
      default: '批量导入'
    },
    //下载模版文件地址
    downloadFileAddr: {
      type: String,
      default: ''
    },
    //下载模版文件名称
    downloadFileName: {
      type: String,
      default: ''
    },
    //excel导入地址
    importExcelUrl: {
      type: String,
      default: ''
    },
    //是否导出服务器文件
    isLoadServerFile: {
      type: Boolean,
      default: false
    },
    //模板文件名称（监控：monitor.xlsx，核验：verify.xlsx）
    templateName: {
      type: String,
      default: ''
    },
    // 自定义导入函数
    onEnd: {
      type: Function,
      default: undefined
    },
    // 自定义下载数据模板函数
    onMoulded: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      uploadService: this.importExcelUrl, //上传服务器地址
      fileListData: [],
      loading: false,
      accept: '.xls,.xlsx',
      visible: false,
      fileText: '回馈管理数据模板',
      downUrl: `/feedback/feedbackManagent/exportFeedbackTemplate`,
      exportDowmData: {}
    }
  },
  computed: {
    isDisabled() {
      return this.fileListData.length > 0 ? false : true
    }
  },
  methods: {
    handleUpload() {
      const { fileListData, onEnd } = this
      const formData = new FormData()
      fileListData.forEach(file => {
        formData.append('file', file)
      })
      // 自定义导入函数
      if (onEnd && typeof onEnd === 'function') {
        onEnd(formData)
      } else {
        this.loading = true
        postAction(this.uploadService, formData)
        .then(res => {
          if (res.success) {
            this.loading = false
            this.handleClose()
            this.$emit('getDatas', res)
          } else {
            this.loading = false
            this.$message.error(res.message ? res.message : '导入出错了！')
          }
        })
        .catch(e => {
          this.$message.warning('导入出错了！')
        })
        .finally(() => (this.loading = false))
      }
    },
    //上传前拦截
    beforeUpload(file) {
      this.fileListData = [file] //[...this.fileListData, file];
      return false
    },
    // 移除
    handleRemove(file) {
      const index = this.fileListData.indexOf(file)
      const newFileList = this.fileListData.slice()
      newFileList.splice(index, 1)
      this.fileListData = newFileList
    },
    handleClose() {
      this.fileListData = []
      this.visible = false
    },
    // 下载数据模板
    exportDowm() {
      const { onMoulded } = this
      // 自定义模板下载函数
      if (onMoulded && typeof onMoulded === 'function') {
        onMoulded()
      } else {
        this.$refs.downLoadComponentsId.exportDowmPOST()
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.ant-upload-matter {
  padding: 30px 0 0;
  p {
    margin-bottom: 0;
  }
}
/deep/.ant-modal-footer {
  position: relative;
  .footer-model {
    position: absolute;
    left: 20px;
    &::before {
      content: '*';
      color: #f5222d;
      margin-right: 5px;
    }
  }
}
</style>
